<!--通过控制器路由的Html引入之前，css样式文件已经被加载并渲染，所以在设置CSS选择器无效，只能通过行内式设置样式-->
<!--<script src="../../libs/network.js"></script>-->
<script src="../../js/detail.js"></script>
<div class="article_content box" ng-controller="videoPublishController">
  <div class="video">
    <img id="videoBgc" src="../img/upload.png"  alt="加载中...">

    <input onchange="previewVideo(this)" id="videoUrl" type="file" accept="video/mp4">
    <video id="videoShow"  controls="controls" src="" >
      <!--<source id="videoShow" type="video/mp4" src="" />-->

    </video>
    <p class="addVideo">请添加视频文件</p>
    <p class="deleVideo" ng-click="deleVideo()"><span >删除视频</span></p>


    <div id="output" style="display: none"></div>
    <script type="text/javascript">
        (function(){
            var video, output;
            var scale = 0.8;
            var initialize = function() {
                output = document.getElementById("output");
                video = document.getElementById("videoShow");
                console.log(video)
                video.addEventListener('loadeddata',captureImage);
            };

            var captureImage = function() {
//                alert("来了")
                var canvas = document.createElement("canvas");
//                console.log(video.videoWidth,video.videoHeight)
                canvas.width = 330//video.videoWidth * scale;
                canvas.height = video.videoHeight * scale;
                canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);

                var img = document.createElement("img");
                img.src = canvas.toDataURL("");
//                console.log(img.src)
                output.appendChild(img);
//                console.log(output)
            };

            initialize();
        })();
    </script>

  </div>
</div>